<template>
	<view class="authorization-wrap">
		<view class="authorization-title">
			<text class="title">绑定您的交易账户</text>
			<text class="tips">选择以下身份进行绑定</text>
		</view>
		<view class="segmented">
			<view class="segmented-item" :class="{active: current === index}" v-for="(item,index) in items" @tap="onClickItem(index)">
				<text>{{item}}</text>
			</view>
		</view>
		<view class="content">
			<view class="identity-item follower" v-show="current === 0">
				<text class="iconfont icon-application2"></text>
				<text class="title">跟随者</text>
				<text class="text">成为OUDDT社区跟随者，跟随全球优秀的加密货币交易员，复制他们的交易策略，并有着多跟跟随方式选择。</text>
				<view class="binding">
					<navigator url="/pages/authorization/bourse">+ 立即绑定</navigator>
					<text>绑定两个交易平台API，可跟随对冲</text>
				</view>
			</view>
			<view class="identity-item trader" v-show="current === 1">
				<text class="iconfont icon-asymmetry"></text>
				<text class="title">交易员</text>
				<text class="text">成为OUDE社区的交易员，您将进入交易员排行榜，在社区展示您的交易策略及交易记录。用户跟随您，您将获得奖励，您的交易盈利越多，所吸引的跟随者用户越多!</text>
				<view class="binding">
					<text>请选择跟单类型绑定API</text>
					<navigator url="/pages/authorization/bourse">USDT合约交易员</navigator>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				items: ['跟随者', '交易员']
			}
		},
		methods: {
			onClickItem(index) { 
				if (this.current !== index){ 
					this.current = index; 
				}
			}
		}
	}
</script>

<style>
	@import url("@/common/authorization.css");
	.authorization-title {
		margin-bottom: 80rpx;
	}
	.authorization-wrap .segmented {
		display: flex;
	}
	.authorization-wrap .segmented-item {
		position: relative;
		flex: 1;
		display: inline-flex;
		height: 70rpx;
		align-items: center;
		justify-content: center;
		color: #999;
	}
	.authorization-wrap .segmented-item.active {
		color: #1296db;
	}
	.authorization-wrap .segmented-item.active::after {
		content: '';
		display: block;
		width: 30rpx;
		height: 6rpx;
		background-color: #1296db;
		position: absolute;
		bottom: 0rpx;
		left: 50%;
		transform: translateX(-50%);
	}
	.authorization-wrap .content {
		margin-top: 40rpx;
		margin-bottom: 50rpx;
	}
	.authorization-wrap .identity-item {
		border-radius: 10rpx;
		height: 1000rpx;
		padding: 30rpx;
	}
	.authorization-wrap .identity-item.follower {
		background-color: #4b5af5;
	}
	.authorization-wrap .identity-item.trader {
		background-color: #323556;
	}
	.authorization-wrap .identity-item .iconfont {
		font-size: 80rpx;
		color: #fff;
	}
	.authorization-wrap .identity-item text{
		display: block;
		color: #fff;
	}
	.authorization-wrap .identity-item navigator {
		width: 100%;
		height: 80rpx;
		display: inline-flex;
		justify-content: center;
		align-items: center;
		border-radius: 50rpx;
		background-color: #fff;
		font-size: 30rpx;
	}
	.authorization-wrap .identity-item .title {
		font-size: 50rpx;
		margin: 30rpx 0rpx;
	}
	.authorization-wrap .identity-item .text {
		margin-bottom: 50rpx;
		font-size: 28rpx;
	}
	.authorization-wrap .identity-item.follower .text {
		height: 480rpx;
	}
	.authorization-wrap .identity-item.trader .text {
		height: 300rpx;
	}
	.authorization-wrap .identity-item .binding {
		text-align: center;
	}
	.authorization-wrap .follower .binding navigator {
		width: 240rpx;
		margin-bottom: 20rpx;
		color: #4B5AF5;
	}
	.authorization-wrap .identity-item .binding text {
		font-size: 24rpx;
		color: #fff;
	}
	.authorization-wrap .identity-item.trader .binding navigator {
		background-color: transparent;
		border: 1rpx solid #fff;
		color: #fff;
		margin-top: 20rpx;
	}
</style>
